<template>
  <div id="MVItem">
    <p class="title" v-if="title">
      <span>{{ title }}</span>
      <van-button
        icon="arrow"
        to="/allmv"
        icon-position="right"
        type="default"
        round
        size="mini"
        >全部</van-button
      >
    </p>
    <div class="mvItem">
      <div
        @click="$router.push('/playMV/' + item.id)"
        class="mvList"
        v-for="item in mvList"
        :key="item.id"
      >
        <van-image lazy-load radius="10" :src="item.cover" />
        <span class="playCount">
          <van-icon name="play" />
          {{ item.playCount | playCount }}</span
        >
        <div class="mv_text">
          <p class="van-ellipsis">{{ item.name }}</p>
          <p class="van-ellipsis">{{ item.artistName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mvitem',
  data () {
    return {}
  },
  props: {
    mvList: {
      type: Array,
      required: true
    },
    title: {
      type: String
    }
  },
  // 定义方法
  methods: {}
}
</script>

<style scoped lang="less">
#MVItem {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: left;
    padding: 0 15px;
    margin-top: 15px;
    .van-button {
      padding: 1px 5px;
      border: 1px solid #ccc;
    }
  }
  .mvItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .mvList {
      position: relative;
      width: 170px;
      height: 140px;
      margin-top: 5px;
      .playCount {
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 1px 5px;
        border: 1px solid #ccc;
        border-radius: 10px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
      }
      .van-image {
        width: 100%;
        height: 95px;
      }
      .mv_text {
        padding: 0 5px;
        p {
          font-size: 12px;
          text-align: left;
        }
      }
    }
  }
}
</style>
